<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      function createDirectLineForTest(options) {
        const workingDirectLine = WebChat.createDirectLine(options);

        return {
          activity$: workingDirectLine.activity$,
          connectionStatus$: workingDirectLine.connectionStatus$,
          postActivity: activity =>
            activity.type === 'message' ? new Observable(() => {}) : workingDirectLine.postActivity(activity)
        };
      }

      run(
        async function () {
          const clock = lolex.createClock();

          async function createWebChat() {
            let props = {
              activityMiddleware: testHelpers.createRunHookActivityMiddleware(),
              directLine: createDirectLineForTest({ token: await testHelpers.token.fetchDirectLineToken() }),
              ponyfill: clock,
              store: testHelpers.createStoreWithOptions({ ponyfill: clock }),
              styleOptions: {
                sendTimeout: 20000,
                sendTimeoutForAttachments: 40000
              }
            };

            const render = () => WebChat.renderWebChat(props, document.getElementById('webchat'));

            render();

            return {
              updateProps: updater => {
                props = updater(props);
                render(props);
              }
            };
          }

          const { updateProps } = await createWebChat();

          await pageConditions.webChatRendered();

          // SETUP: Advance 1 second for the connection status prompt to be gone.
          clock.tick(1000);

          await pageConditions.uiConnected();

          // SETUP: An empty file blob.
          const fileBlob = new Blob([new ArrayBuffer(0)]);

          fileBlob.name = 'empty.zip';

          // WHEN: Sending out the file.
          await pageObjects.runHook(({ useSendFiles }) => useSendFiles()([fileBlob]));
          await pageConditions.numActivitiesShown(2);

          // THEN: It should show "Sending".
          //       Note the first activity is reserved for "run hook", we are checking activity status from the second activity.
          await expect(pageElements.activityStatuses()[1].innerText).toBe('Sending');
          await host.snapshot();

          // WHEN: After 20 seconds.
          //       Note the send timeout for activity with attachments is 40 seconds.
          clock.tick(20000);

          // THEN: It should continue to show "sending" because attachments has longer timeout (40 seconds).
          await expect(pageElements.activityStatuses()[1].innerText).toBe('Sending');
          await host.snapshot();

          // WHEN: Advanced another 20 seconds.
          clock.tick(100000);

          // THEN: It should show timed out because the send timeout for message with attachments is 40 seconds.
          await expect(pageElements.activityStatuses()[1].innerText).toBe('Send failed. Retry.');
          await host.snapshot();

          // WHEN: Setting `styleOptions.sendTimeoutForAttachments` to 50 seconds.
          updateProps(props => updateIn(props, ['styleOptions', 'sendTimeoutForAttachments'], () => 130000));

          // THEN: It should revive the message and show "Sending" again.
          await expect(pageElements.activityStatuses()[1].innerText).toBe('Sending');
          await host.snapshot();
        },
        { ignoreErrors: true }
      );
    </script>
  </body>
</html>
